<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地存储</title>
</head>

<!-- 
    1. 本地存储对象
        window.localStorage

        localStorage (本地存储,永久存储) 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除!
        sessionStorage (会话存储,临时存储) 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页时,之后将会删除这些数据.
 -->
<!-- 
    一.本地存储  特点:
        1.数据存储在用户浏览器中
        2.设置,读取方便,甚至页面刷新不丢失数据
        3.容量较大,sessionStorage  约5M 、localStorage 约20M (至少5M)
        4.只能存储字符串,可以将对象JSON.stringify() 编码后存储


    sessionStorage:会话本地存储 特点:

        1.关闭窗口或标签页时,之后将会删除这些数据
        2.在同一个窗口(页面)下数据可以共享
        3.以键值对的形式存储使用 

    sessionStorage.
        setItem(key,value)   // 存储数据
        getItem(key)        // 获取数据
        removeItem(key)     // 删除数据
        clear()             // 删除所有数据

 -->
<body>
    <h2></h2>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">删除所有数据</button>
</body>
<script>
    // 会话存储
    console.log(sessionStorage);

    var ipt = document.querySelector('input')
    document.querySelector('.set').addEventListener('click', function () {

        // 存储数据
        // sessionStorage.setItem('userName','Tom')
        sessionStorage.setItem('userName', ipt.value)

        sessionStorage.setItem('passWord', 1237456)
        sessionStorage.setItem('obj', JSON.stringify({ name: 'Tom', age: 18 }))
    })

    //  获取
    document.querySelector('.get').addEventListener('click', function () {
        var user = sessionStorage.getItem('userName')
        console.log(user);
        // ipt.value = user
        document.querySelector('h2').innerHTML = user;

        var obj = sessionStorage.getItem('obj')
        console.log(obj, typeof obj);
        obj = JSON.parse(obj)
        console.log(obj);
    })

    // 删除数据
    document.querySelector('.remove').addEventListener('click', function () {
        sessionStorage.removeItem('obj')
    })

    //清空数据
    document.querySelector('.del').addEventListener('click', function () {
        sessionStorage.clear()
    })
</script>

</html>